<template>
  <!-- 结婚美图 -->
        <div class="photo">
          <h3>结婚美图</h3>
          <ul class="clearfix">
            <li><img src="https://qnm.hunliji.com/o_1dd2uhha81889tepbn41m701se2f.png" alt=""><span>婚纱照</span></li>
            <li><img src="https://qnm.hunliji.com/o_1dd2uhha81hvhp61tmb15f61v6pc.png" alt=""><span>婚礼布置</span></li>
            <li><img src="https://qnm.hunliji.com/o_1dd2uhha81u4a126brdbnajtudd.png" alt=""><span>婚纱礼服</span></li>
            <li><img src="https://qnm.hunliji.com/o_1dd2uhha8pkn7ij1t53nqmsc0e.png" alt=""><span>婚礼跟拍</span></li>
          </ul>
        </div>
</template>

<style scoped>
.photo{
  margin-top: 40px;
}
.photo h3{
  font-size: 24px;
  font-weight: normal;
  margin-bottom: 20px;
}
.photo ul li{
  float: left;
  border-radius: 6px;
  width: 154px;
  height: 68px;
  padding: 12px;
  box-sizing: border-box;
  box-shadow: 0px 8px 28px rgb(0 0 0 / 8%);
  margin-bottom: 16px;  
  cursor: pointer;
}
.photo ul li img{
  width: 44px;
  height: 44px;
  margin-right: 14px;
  vertical-align: middle;

}
.photo ul li span{
  color: #333;
  font-size: 16px;
  font-weight: bold;
}
.photo ul li span:hover{
  color: #f83244;
}
</style>